<template>
    <UserView class="user_view">
        <h2>我的动态</h2>
        <div class="card">
            <div class="card-body card-body-item">
                <div class="card card_dynamic" style="width: 18rem;" v-for="dynamic in recently_visit_books.recently_visit_books[currentIndex]" :key="dynamic.id">
                    <img :src="dynamic.photo" class="card-img-top" alt="...">
                    <div class="card-body">
                        <div>
                            <h5 class="card-title">{{ dynamic.title }}</h5>
                            <div class="submittime">{{ dynamic.submittime }}</div>
                        </div>
                        <p class="card-text" @mouseover="open_text_function(dynamic.photo, dynamic.content)" @mouseleave="close_text_function" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
                            {{ dynamic.content }}
                        </p>
                        <button type="button" class="btn btn-danger" @click="delete_a_dyanmic(dynamic.id, dynamic.title)">删除这条动态</button>
                    </div>
                    <div class="tanchuang" v-if="is_open">
                        <div class="mb-3">
                            <div class="info_confirm">请确认学号是否正确</div>
                            <input type="text" class="form-control" :placeholder="$store.state.user.username" disabled>
                            <div class="info_confirm">请确认是否是所选动态</div>
                            <input type="text" class="form-control" :placeholder="dynamic_title" disabled>
                            </div>
                        <div>
                            <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete">确定</button>
                            <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <nav aria-label="Page navigation example book-pagination" v-if="recently_visit_books.recently_visit_books.length !== 0">
                <ul class="pagination">
                    <li class="page-item" :class="{ disabled: currentIndex === 0 }">
                        <a class="page-link" href="#" @click="go_to_page(currentIndex - 1)">上一页</a>
                    </li>
                    <li class="page-item" v-for="index in pageCount" :key="index" :class="{ active: index - 1 === currentIndex }">
                        <a class="page-link" href="#" @click="go_to_page(index - 1)">{{ index }}</a>
                    </li>
                    <li class="page-item" :class="{ disabled: currentIndex === pageCount - 1 }">
                        <a class="page-link" href="#" @click="go_to_page(currentIndex + 1)">下一页</a>
                    </li>
                </ul>
            </nav>

            <div class="tanchuang" v-if="open_text && !is_open">
                <img :src="dynamic_photo" alt="" class="dynamic_image">
                <p>{{ dynamic_content }}</p>
            </div>
        </div>
    </UserView>
</template>

<script>
import UserView from '@/components/UserView.vue';
import $ from 'jquery';
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { ref } from 'vue';
export default {
    name: "UserPostView",
    components: {
        UserView,
    },
    setup() {
        const store = useStore();
        const my_dynamic = reactive({});
        const open_text = ref(false);
        const dynamic_photo = ref('');
        const dynamic_content = ref('');
        const dynamic_title = ref('');
        const is_open = ref(false);
        const dynamic_id = ref('');
        const recently_visit_books = reactive({recently_visit_books: []});
        let pageCount = ref(0);
        let currentIndex = ref(0);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/dynamic/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                let my_dynamic_value = [];
                for (let i of resp) {
                    if (i.user_id === store.state.user.id) {  
                        my_dynamic_value.push(i);
                    }
                    my_dynamic.count = my_dynamic_value.length;
                    my_dynamic.my_dynamic = my_dynamic_value;
                }
                let currentPage = [];
                for (let i of my_dynamic.my_dynamic) {
                    if (currentPage.length < 3) {
                        currentPage.push(i);
                    } else {
                        recently_visit_books.recently_visit_books.push(currentPage);
                        currentPage = [i];
                    }
                }
                if (currentPage.length > 0) {
                    recently_visit_books.recently_visit_books.push(currentPage);
                }
                pageCount.value = recently_visit_books.recently_visit_books.length;
            }
        })

        const go_to_page = (pageIndex) => {
            if (pageIndex >= 0 && pageIndex < pageCount.value) {
                currentIndex.value = pageIndex;
            }
        }

        const open_text_function = (dynamicphotox, dynamiccontentx) => {
            open_text.value = true;
            dynamic_photo.value = dynamicphotox;
            dynamic_content.value = dynamiccontentx;
        }
        const close_text_function = () => {
            open_text.value = false;
        }
        const delete_a_dyanmic = (dynamic_idx, dynamic_titlex) => {
            dynamic_id.value = dynamic_idx;
            dynamic_title.value = dynamic_titlex;
            is_open.value = true;
            open_text.value = false;
        }

        const confirm_delete = () => {
            $.ajax({
                url: "http://47.121.28.202:8000/settings/dynamic/",
                type: "DELETE",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    id: dynamic_id.value
                },
                success() {
                    is_open.value = false;
                    open_text.value = false;
                    my_dynamic.my_dynamic = my_dynamic.my_dynamic.filter(book => book.id !== dynamic_id.value);  
                    recently_visit_books.recently_visit_books = [];  
                    let currentPage = [];  
                    for (let i of my_dynamic.my_dynamic) {  
                        currentPage.push(i);  
                        if (currentPage.length === 3) {  
                            recently_visit_books.recently_visit_books.push(currentPage);  
                            currentPage = [];  
                        }  
                    }  
                    if (currentPage.length > 0) {  
                        recently_visit_books.recently_visit_books.push(currentPage);  
                    }  
                    pageCount.value = recently_visit_books.recently_visit_books.length;   
                    if (currentIndex.value >= pageCount.value && pageCount.value > 0) {  
                        currentIndex.value = pageCount.value - 1; 
                    } else if (pageCount.value === 0) {  
                        currentIndex.value = 0;  
                    } 
                }
            })
        }

        const close = () => {
            is_open.value = false;
            open_text.value = false;
        }

        return {
            my_dynamic,
            open_text_function,
            open_text,
            close_text_function,
            dynamic_photo,
            dynamic_content,
            delete_a_dyanmic,
            confirm_delete,
            is_open,
            dynamic_title,
            close,
            go_to_page,
            currentIndex,
            pageCount,
            recently_visit_books,
        }
    }
}
</script>

<style scoped>
.btn-danger {
    width: 100%;
}
.card_dynamic {
    display: inline-block;
    margin: 10px;
}
.card-img-top {
    height: 150px;
}
.card-text {
    height: 76px;
}
.user_view {
    user-select: none;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.dynamic_image {
    width: 40%;
    height: 33%;
}
.submittime {
    font-size: small;
    position: relative;
    left: 120px;
}
.btn-tanchuang {
    width: 90px;
    margin: 10px;
}
.card-body-item {
    position: relative;
    left: 45px;
}
</style>